<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无需函数柯里化实现表单收集</title>

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script src="./js/prop-types.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
       class Abc extends React.Component{

           state = {
               username:'',
               password:''
           }

           saveForm=(dataType,event)=>{

               this.setState({[dataType]:event.target.value})

           }

           handleSubmit=(event)=>{
               event.preventDefault()
               const {username,password} = this.state
               alert(`用户名:${username},密码:${password}`)
           }


           render(){
               return (
                   <form action="" onSubmit={this.handleSubmit}>
                       用户名:<input onChange={event=>this.saveForm('username',event)} type="text"/>
                       密码:<input onChange={event=>this.saveForm('password',event)} type="password" />
                       <button>登录</button>
                   </form>
               )
           }
       }
        ReactDOM.render(<Abc/>,document.getElementById('app'))




    </script>
</body>
</html>
